import { MouseEvent } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import Icon from '../../component/Icon'
import IconAvatar from '../../asserts/avatar_default.png'
import Message from '../../component/Message'
import { versionInfo } from '../../utils/common'
import Telegram from '../../utils/telegram'


const Container = styled.div`
    display: flex;
    align-items: center;
    box-sizing: border-box;
`

const Left = styled.div`
    .icon {
        border-radius: 50%;
    }
`

const Right = styled.div`
    margin-left: .625rem;
`
const Title = styled.div`
    font-size: .75rem;
    font-weight: bold;
    color: #878D97;
    min-height: .875rem;
    text-align: start;
`

const SubTitle = styled.div`
    margin-top: .5rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: start;
    color: ${(prop) => prop.theme.text.normal};
`


const User: React.FC = () => {
    const user = useSelector((state: RootState) => state.user)
    const { t } = useTranslation()

    const onClick = () => {
        if (!user.inviterUsername) {
            return;
        }

        Telegram.chat(user.inviterUsername)
    }

    const onAvatarClick = (event: MouseEvent<HTMLImageElement, MouseEvent>) => {
        if (event.detail === 3) {
            Message.info(versionInfo());
        }
    }
    return <Container>
        <Left>
            <Icon
                onClick={(event) => onAvatarClick(event as unknown as MouseEvent<HTMLImageElement, MouseEvent>)}
                className='icon'
                src={user.icon || IconAvatar}
                width='3.125rem'
                height='3.125rem'
            />
        </Left>
        <Right>
            <Title>{user.username || ''}</Title>
            <SubTitle onClick={onClick}>
                <span>{`${t('wallet.invitee')}: ${user.inviter || ''} `}</span>
                {user.inviter && <Icon
                    name='arrow_right'
                    width='.75rem'
                />}
            </SubTitle>
        </Right>
    </Container>
}

export default User